<!-- 筛选条件组件，包括以下条件：数据时间范围（起止时间），房间号模糊匹配，入住人模糊匹配，
收入渠道-->

<script setup>
import {defineEmits, reactive, ref} from 'vue';
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import IncDetailDialogCont from "@/views/app/IncomeDetail/IncDetailDialogCont.vue";
import {useStore} from "vuex";

// 通过外部事件响应向外传输数据
const emit = defineEmits(['return']);
const store = useStore();

// 日期计算
const dateShortcuts = [...store.state.dateShortcuts];
// 筛选条件
const conditions = reactive({startDate: '', endDate: '', roomNo: '', customer: '', source: ''});
const dateRange = ref([]);
const allSources = ref(['携程', '美团', '抖音', '不限']);
const newDetailDialogVisible = ref(false);
// 待新建明细
const newDetail = reactive({
  dataDate: '', roomNo: '', customer: '', realIncome: '', source: '', description: ''
});

const doFilter = () => {
  let results = [];
  // 将日期范围拆为起始和终止日期
  conditions.startDate = dateRange.value[0];
  conditions.endDate = dateRange.value[1];
  // 如果勾选不限，查询时不传入参数
  if(conditions.source === '不限')
    conditions.source = '';
  // 代入条件执行查询
  axios.post('http://localhost:30601/fms/income-analyse/query-income-detail', conditions)
      .then(response => {
            if (response.data.content != null) {
              // 查询成功，将消息散布到父级组件中
              results = response.data.content;
              console.log(response.data.content);
              emit('return', results);
              ElMessage({message: '成功查询到' + results.length + '条记录', type: "success"});
            } else {
              ElMessage({
                message: '查询失败！错误编码' + response.data.code + "：" + response.data.message,
                type: "error"
              });
            }
          }
      );
  console.log(dateRange.value[0]);
}

const createNewDetail = (newDetail) => {
  let warnMessage = '';
  if (newDetail.dataDate === '') warnMessage += '日期不能为空；';
  if (newDetail.roomNo === '') warnMessage += '房间号不能为空；';
  if (newDetail.realIncome === '') warnMessage += '实际收款不能为空；';
  if (newDetail.source === '') warnMessage += '收款渠道不能为空';
  if (warnMessage === '') {
    newDetailDialogVisible.value = false;
    axios.post('http://localhost:30601/fms/income-analyse/create-new-income-detail', newDetail)
        .then(response => {
          console.log(response.data);
          if (response.data.code === '20000') {
            ElMessage({message: "收款明细录入成功！", type: 'success'});
            // 同时自动查询一下当天所有数据
            axios.post('http://localhost:30601/fms/income-analyse/query-income-detail',
                {startDate: newDetail.dataDate, endDate: newDetail.dataDate})
                .then(response => {
                  if (response.data.content != null) emit('return', response.data.content);
                });
          } else {
            ElMessage({
              message: "明细录入失败！错误编码" + response.data.code + "：" + response.data.message,
              type: 'error'
            });
          }
        });
  } else {
    ElMessage({message: warnMessage, type: 'warning'});
  }
}
</script>

<template>
  <div class="flex gap-4 mb-4">
    <el-date-picker v-model="dateRange" style="width: 240px; margin-right: 15px;margin-bottom: 10px;"
                    size="default" type="daterange" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    :shortcuts="dateShortcuts"
                    range-separator="到" start-placeholder="起始日期" end-placeholder="终止日期"/>
    <el-input class="filter-condition" v-model="conditions.roomNo" style="width: 90px;" type="number"
              placeholder="房间号"
              size="default"/>
    <el-input class="filter-condition" v-model="conditions.customer" style="width: 150px;" placeholder="入住人姓名"
              size="default"/>
    <el-select class="filter-condition" v-model="conditions.source" style="width: 100px;" placeholder="收款渠道"
               size="default">
      <el-option v-for="source in allSources" :label="source" :value="source"/>
    </el-select>
    <el-button class="filter-condition" type="success" size="default" @click="doFilter">开始查询</el-button>
    <el-divider style="margin-right: 20px;" class="filter-condition" direction="vertical"/>
    <el-button class="filter-condition" type="primary" size="default" @click="newDetailDialogVisible = true">
      新增明细
    </el-button>
  </div>
  <el-dialog v-model="newDetailDialogVisible" title="新增明细" width="500">
    <inc-detail-dialog-cont :detail="newDetail" @cancel="newDetailDialogVisible = false"
                            @submit-detail="createNewDetail"/>
  </el-dialog>
</template>

<style scoped lang="scss">
.filter-condition {
  margin-right: 15px;
  margin-bottom: 10px;
}

.dialog-item {
  margin-bottom: 10px;
}
</style>